import * as echarts from 'echarts'

export const lineOption = {
  grid: {
    top: '20%',
    left: '3%',
    right: '3%',
    bottom: '0',
    containLabel: true
  },
  legend: {
    data: ['儿童健康档案随访率'],
    textStyle: {
      // color: '#87c6FF'
    }
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      lineStyle: {
        color: '#ddd'
      }
    },
    backgroundColor: 'rgba(255,255,255,1)',
    padding: [15, 10],
    textStyle: {
      // color: '#87c6FF'
    },
    extraCssText: 'box-shadow: 0 0 5px rgba(0,0,0,0.3)'
  },
  xAxis: {
    type: 'category',
    data: ['2016年', '2018年', '2020年', '2021年', '2022年'],
    boundaryGap: false,
    axisTick: {
      show: false // 不显示坐标轴刻度线
    },
    axisLine: {
      show: true // 不显示坐标轴线
    },
    axisLabel: {
      rotate: 45, //代表逆时针旋转
      show: true // 不显示坐标轴上的文字
    },
    splitLine: {
      show: false // 不显示网格线
    }
  },
  yAxis: {
    name: '单位：%',
    nameTextStyle: {
      // color: "#7ec7ff",
      fontSize: 12,
      padding: [0, 0, 0, 0]
    },
    type: 'value',
    axisTick: {
      show: false // 不显示坐标轴刻度线
    },
    axisLine: {
      show: false // 不显示坐标轴线
    },
    axisLabel: {
      show: true, // 不显示坐标轴上的文字
      textStyle: {
        // color: "#7ec7ff",
        padding: 0
      }
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: '#0a3256'
      }
    }
  },
  dataZoom: [
    {
      type: 'slider',
      start: 0,
      end: 100,
      brushSelect: false,
      bottom: 16
    }
  ],
  series: [
    {
      data: [20, 92, 60, 23, 56],
      name: '儿童健康档案随访率',
      type: 'line',
      smooth: true,
      showSymbol: true,
      symbol: 'emptyCircle',
      symbolSize: 8,
      areaStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: '#66a7ff'
              },
              {
                offset: 1,
                color: '#f4faff'
              }
            ],
            false
          )
        }
      },
      itemStyle: {
        normal: {
          color: '#127bfe'
        }
      },
      lineStyle: {
        normal: {
          width: 3
        }
      }
    }
  ]
}
export const barOption = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      // 坐标轴指示器，坐标轴触发有效
      type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
    }
  },
  grid: {
    top: 10,
    left: '2%',
    right: '2%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      axisLabel: {
        rotate: 0 //代表逆时针旋转
      },
      data: ['2016年', '2018年', '2020年', '2021年', '2022年'],
      axisTick: {
        alignWithLabel: true
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      axisTick: {
        show: false
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: '#0a3256'
        }
      }
    }
  ],
  series: [
    {
      name: '',
      type: 'bar',
      stack: 'vistors',
      barWidth: '60%',
      data: [24, 345, 89, 34, 12]
    }
  ]
}
export const pieOption = {
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b} {d}%'
  },
  legend: {
    // right: "0",
    // orient: "vartical",
    // top: "10",
    textStyle: {
      // color: '#87c6FF'
    }
  },
  grid: {
    left: '10%',
    right: '10%',
    bottom: '0%',
    containLabel: true
  },
  color: ['#ffc466', '#00bfff', '#93d4bc', '#ecf460', '#ec6b6b', '#127bfe'],
  series: [
    {
      name: '',
      type: 'pie',
      radius: ['0%', '54%'],
      center: ['50%', '64%'],
      label: {
        normal: {
          show: true,
          formatter: '{d}%'
        }
      },
      data: [
        {
          name: '2019年',
          value: 12
        },
        {
          name: '2020年',
          value: 34
        },
        {
          name: '2021年',
          value: 56
        },
        {
          name: '2022年',
          value: 26
        }
      ],
      itemStyle: {
        normal: {
          label: {
            show: true,
            textStyle: {
              // color: '#87c6FF'
            },
            formatter: function (params) {}
          },
          labelLine: {
            //是否显示视觉引导线。
            length: 10,
            length2: 30,
            show: true,
            color: '#00ffff'
          }
        }
      }
    }
  ]
}
